@charset "utf-8";

//@import "reset";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}
*{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    font-size: 0px;
}

html,body{ 
    width: 100%;
}

#web{
    width: 100%; 
    height: 100%;
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .alert{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 200;
        background:transparent;
        .alert1{
            display: none;
            position: absolute;
            top: 35%;
            width: 90%;
            margin-left: 5%;
            height: r(300);
            background: white;
            border-radius: r(8);
            .alert-font{
                font-size: r(30);
                margin-top: r(100);
                text-align: center;
                }
            button{
                margin-left: 10%;
                width: 80%;
                height: r(80);
                font-size: r(30);
                margin-top: r(50);
                background: white;
                border-radius: r(8);
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                outline: none;
                cursor: pointer;
            }
        }
        .alert2{
            display: none;
            position: absolute;
            top: 35%;
            width: 90%;
            margin-left: 5%;
            height: r(300);
            background: white;
            border-radius: r(8);
            .alert-font{
                font-size: r(30);
                margin-top: r(100);
                text-align: center;
                }
            button{
                margin-left: 10%;
                width: 80%;
                height: r(80);
                font-size: r(30);
                margin-top: r(50);
                background: white;
                border-radius: r(8);
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                outline: none;
                cursor: pointer;
            }
        }
        .alert3{
            display: none;
            position: absolute;
            top: 35%;
            width: 90%;
            margin-left: 5%;
            height: r(300);
            background: white;
            border-radius: r(8);
            .alert-font{
                font-size: r(30);
                margin-top: r(100);
                text-align: center;
                }
            button{
                margin-left: 10%;
                width: 80%;
                height: r(80);
                font-size: r(30);
                margin-top: r(50);
                background: white;
                border-radius: r(8);
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                outline: none;
                cursor: pointer;
            }
        }
        .alert4{
            display: none;
            position: absolute;
            top: 35%;
            width: 90%;
            margin-left: 5%;
            height: r(300);
            background: white;
            border-radius: r(8);
            .alert-font{
                font-size: r(30);
                margin-top: r(100);
                text-align: center;
                }
            button{
                margin-left: 10%;
                width: 80%;
                height: r(80);
                font-size: r(30);
                margin-top: r(50);
                background: white;
                border-radius: r(8);
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                outline: none;
                cursor: pointer;
            }
        }
    }
    .head{
        width: 100%;
        height: r(367);
        img{
            width: 100%;
            height: 100%;
        } 
    }
    .banan{
        padding: 0;
        margin: 0;
        font-size: 0px;
        width: 100%;
        height: r(260);
        background: url(../img/index/banan_bgr.jpg);
        background-size:100% 100%;
      .swiper-wrapper{
          width: 100%;
          height: 100%;
          .swiper-slide{
              margin-top: r(6);
              width:r(464);
              height:r(218);
              img{
                  width: 100%;
                  height: 100%;
              }
          }
      }
      .swbtn{
          width: r(50);
          height: r(40);
          opacity: .8;
      }
//    .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");}
///*改变了颜色和加粗的样式*/
//.swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
//
//    .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
    }
    .index_chou{
        position: fixed;
        top: r(140);
        left: 0;
        width:r(640);
        height: r(678);
        background: url(../img/index/index_chou_bgr2.png);
        background-size: 100% 100%;
        z-index: 10;
        display: none;
        .chou_juan{
            position: absolute;
            top:30%;
            left: 10%;
            width: r(462);
            height: r(212);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .fudong{
            animation: fudong 1s ease;
            animation: fudong 1s ease;
            -webkit-animation: fudong 1s ease;
            -ms-animation: fudong 1s ease;
            -moz-animation: fudong 1s ease;
        }
        .index_open{
            position: absolute;
            top: r(80);
            right: r(45);
            width: r(32);
            height: r(32);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .index_chou2{
            position: absolute;
            top: r(102);
            left: r(86);
            width: r(473);
            height:r(473);
            background: url(../img/index/index_chou_bgr.png);
            transition:0.5s;
            background-size: 100% 100%;
        }
         .chou_botton{
             position: absolute;
             top: r(233);
             left: r(255);
             z-index: 11;
                width: r(147);
                height: r(186);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
    }
     @keyframes fudong{
            0%{
                transform: rotate(0) scale(0.5);
            }
            100%{
                transform:rotate(360deg) scale(1);
            }
        }
    .new-people{
        margin: 0;
        padding: 0;
        font-size: 0px;
        width: 100%;
        height: r(700);
        background: url(../img/index/new_people_bgr.jpg);
        background-size:100% 100%;
        .new-pimg{
            margin: 0;
            padding-top: r(7);
            font-size: 0px;
            width: 100%;
            height: r(65);
            .p-img{
                width: r(240);
                height: r(65);
                margin:0 auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .new-input{
            width: r(555);
            height: r(586);
            margin: r(33) auto 0;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .input-content{
                position: absolute;
                top: r(38);
                left: r(38);
                width: r(484);
                height: r(530);
                background: white;
                #input_shop1{
                    width: r(446);
                    height: r(150);
                    margin: r(15) auto 0;
                    cursor: pointer;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                #input_shop2{
                    width: r(446);
                    height: r(150);
                    margin: r(25) auto 0;
                    cursor: pointer;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                 #input_shop3{
                    width: r(446);
                    height: r(150);
                    margin: r(25) auto 0;
                    cursor: pointer;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
    .new-start{
        width: 100%;
        height: r(850);
        background: url(../img/index/start_bgr.jpg);
        background-size: 100% 100%;
        .new-simg{
            margin: 0;
            padding-top: r(26);
            font-size: 0px;
            width: 100%;
            height: r(65);
            .s-img{
                width: r(240);
                height: r(65);
                margin:0 auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .start-input{
            position: relative;
            margin: r(26) auto 0;
            width:r(555);
            height: r(713);
            background: url(../img/index/new_shop.png);
            background-size: 100% 100%;
            .start-content{
                position: absolute;
                top: r(43);
                left:r(36) ;
                width: r(484);
                height: r(647);
                background: white;
                .start-head{
                    width: 100%;
                    height: r(97);
                    .start-img{
                        width: r(134);
                        height: r(62);
                        margin: r(18) auto r(17);
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .start-go1{
                    display: inline-block;
                    width: r(130);
                    height: r(168);
                    margin-left: r(15);
                    vertical-align:bottom;
                    text-align: center;
                    .go-img1{
                        width:100%;
                        height: r(97);
                        img{
//                          margin-top: r(50);
                            width: r(131);
                            height:r(97);
                        }
                    }
                    .go-button{
                        margin-top: r(15);
                        width: 100%;
                        height: r(20);
                        .button-imgs{
                            width: r(108);
                            height: r(24);
                            margin: 0 auto;
                            font-size: r(20);
                            letter-spacing: r(3);
                            text-align: center;
                        }
                    }
                }
                .start-go2{
                    display: inline-block;
                    vertical-align:bottom;
                    width: r(146);
                    height: r(168);
                    margin-left: r(29);
                    text-align: center;
                    .go-img1{
                        width:100%;
                        height: r(97);
                        img{
                            margin-top: r(15);
                            width: r(126);
                            height: r(82);
                        }
                    }
                    .go-button{
                        margin-top: r(15);
                        width: 100%;
                        height: r(20);
                        .button-imgs{
                            width: r(108);
                            height: r(24);
                            margin: 0 auto;
                            font-size: r(20);
                            letter-spacing: r(3);
                            text-align: center;
                        }
                    }
                }
                .start-go3{
                    display: inline-block;
                    vertical-align:bottom;
                    width: r(156);
                    height: r(168);
                    margin-left: r(8);
                    .go-img1{
                        width:100%;
                        height: r(97);
                        text-align: center;
                        img{
                            margin-top: r(40);
                            width: r(57);
                            height: r(57);
                        }
                    }
                    .go-button{
                        margin-top: r(15);
                        width: 100%;
                        height: r(20);
                        .button-imgs{
                           width: r(108);
                            height: r(24);
                            margin: 0 auto;
                            font-size: r(20);
                            letter-spacing: r(3);
                            text-align: center;
                        }
                    }
                }
                .start-go4{
                    display: inline-block;
                    vertical-align:bottom;
                    width: r(130);
                    height: r(168);
                    margin-left: r(15);
                    margin-bottom: r(27);
                    .go-img2{
                        width: 100%;
                        height: r(97);
                        text-align: center;
                        img{
                            margin-top: r(23);                            
                            width: r(74);
                            height: r(74);
                        }
                    }
                    .go-button{
                        margin-top: r(15);
                        width: 100%;
                        height: r(20);
                        .button-imgs{
                           width: r(108);
                            height: r(24);
                            margin: 0 auto;
                            font-size: r(20);
                            letter-spacing: r(3);
                            text-align: center;
                        }
                    }
                }
                .start-go5{
                    display: inline-block;
                    vertical-align:bottom;
                    width: r(146);
                    height: r(168);
                    margin-left: r(29);
                    margin-bottom: r(27);
                     .go-img2{
                        width: 100%;
                        height: r(97);
                        text-align: center;
                        img{
                            margin-top: r(11);
                            width: r(86);
                            height: r(86);
                        }
                    }
                    .go-button{
                        margin-top: r(15);
                        width: 100%;
                        height: r(20);
                        .button-imgs{
                           width: r(108);
                            height: r(24);
                            margin: 0 auto;
                            font-size: r(20);
                            letter-spacing: r(3);
                            text-align: center;
                        }
                    }
                }
                .start-go6{
                    display: inline-block;
                    vertical-align:bottom;
                    width: r(156);
                    height: r(168);
                    margin-left: r(8);
                    margin-bottom: r(27);
                     .go-img2{
                        width: 100%;
                        height: r(97);
                        text-align: center;
                        img{
                            margin-top: r(40);
                            width: r(60);
                            height: r(57);
                        }
                    }
                    .go-button{
                        margin-top: r(15);
                        width: 100%;
                        height: r(20);
                        .button-imgs{
                           width: r(108);
                            height: r(24);
                            margin: 0 auto;
                            font-size: r(20);
                            letter-spacing: r(3);
                            text-align: center;
                        }
                    }
                }
                .start-go7{
                    display: inline-block;
                    width: r(130);
                    height: r(168);
                    margin-left: r(15);
                    vertical-align:bottom;
                    text-align: center;
                    .go-img3{
                        width:100%;
                        height: r(97);
                        vertical-align:bottom;
                        img{
                            vertical-align:bottom;
                            margin-top: r(46);
                            width: r(108);
                            height:r(51);
                        }
                    }
                    .go-button{
                        margin-top: r(15);
                        width: 100%;
                        height: r(20);
                        .button-imgs{
                            width: r(108);
                            height: r(24);
                            margin: 0 auto;
                            font-size: r(20);
                            letter-spacing: r(3);
                            text-align: center;
                        }
                    }
                }
                .start-go8{
                    display: inline-block;
                    vertical-align:bottom;
                    width: r(146);
                    height: r(168);
                    margin-left: r(29);
                    text-align: center;
                    .go-img3{
                        width:100%;
                        height: r(97);
                        vertical-align:bottom;
                        img{
                            vertical-align:bottom;
                            margin-top: r(49);
                            width: r(141);
                            height: r(48);
                        }
                    }
                    .go-button{
                        margin-top: r(15);
                        width: 100%;
                        height: r(20);
                        .button-imgs{
                            width: r(108);
                            height: r(24);
                            margin: 0 auto;
                            font-size: r(20);
                            letter-spacing: r(3);
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
    .new-feature{
        width: 100%;
        height: r(905);
        background: url(../img/index/feature_bgr.jpg);
        background-size: 100% 100%;
        .new-fimg{
            margin: 0;
            padding-top: r(17);
            font-size: 0px;
            width: 100%;
            height: r(65);
            .f-img{
                width: r(240);
                height: r(65);
                margin:0 auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .feature-input{
            position: relative;
            width: r(555);
            height: r(712);
            margin: r(28) auto 0;
            background: url(../img/index/new_shop.png);
            background-size: 100% 100%;
            .feature-content{
                position: absolute;
                top: r(41);
                left: r(38);
                width: r(484);
                height: r(647);
                background: white;
                .feature-shop1{
                    position: relative;
                    width: r(463);
                    height: r(297);
                    margin: r(14) auto 0;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .feature-fonter{
                        display: none;
                        position: absolute;
                        top: r(0);
                        left: r(0);
                        font-size: r(12);
                        color: #000000;
                        text-align: left;
                        .fonter_name{
                            display: inline-block;
                        }
                    }                   
                     .feature-button{
                        position: absolute;
                        left: 0;
                        bottom: r(36);
                        width: 100%;
                        height: r(24);
                        .feature-img{
                            width: r(108);
                            height: 100%;
                            margin: 0 auto;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
                .feature-shop2{
                    position: relative;
                    width: r(463);
                    height: r(297);
                    margin: r(16) auto 0;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                   .feature-fonter{
                        display: none;
                        position: absolute;
                        top: r(0);
                        left: r(0);
                        font-size: r(12);
                        color: #000000;
                        text-align: left;
                    }    
                    .feature-button{
                        position: absolute;
                        left: 0;
                        bottom: r(36);
                        width: 100%;
                        height: r(24);
                        .feature-img{
                            width: r(108);
                            height: 100%;
                            margin: 0 auto;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
    .rent_chou{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        opacity:1;
    }
     .raffle{
            display: none;
            position: fixed;
            top: 50%;
            left: 30%;
            width: 40%;
            height: r(100);
            background: yellow;
            text-align: center;
            line-height: r(100);
            font-size: r(20);
       }
       .opcitys{
             animation: opcitys 3s ease;
             -webkit-animation:opcitys 3s ease;
            -ms-animation:opcitys 3s ease;
            -moz-animation:opcitys 3s ease;
        }
        .trand{
             animation: trand 1s ease;
        }
        @keyframes opcitys{
            0%{opacity: 0.9;};
            100%{opacity: 0;};
        }
         @keyframes trand{
            0%{transform: translateY(-200px) scale(0.5)};
            50%{transform: translateY(0px) rotateY(360deg) scale(0.5)};
            100%{transform: rotateY(0deg) scaleY(1)};
        }
}
